<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" 
         import="com.shxt.lesson29.util.*"
         import="java.util.*" %>
<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width;">
    <meta charset='UTF-8'>
    <base href="#" target="">
    <title>BookSystem</title>
    <link rel="stylesheet" type="text/css" href="./src/css/grid.css">
    <link rel="stylesheet" type="text/css" href="./src/css/nav-bar.css">
    <link rel="stylesheet" type="text/css" href="./src/css/style.css">
    <link rel="stylesheet" type="text/css" href="./src/css/form.css">
    <link rel="stylesheet" type="text/css" href="./src/css/table.css">
    <script src="./src/js/switchPanel.js"></script>
    <script src='./src/js/AjaxDoc.js'></script>
</head>

<body class="margin0 padding0">
    <div class="row bg-shadow bg-dodger fg-white">
        <div class="container bg-shadow">
            <div class="span12">
                <h1 class="font4 margin-left30">图书管理系统</h1>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="container">
            <div class="span3">
                <div class="row margin30">
                    <div class="nav-bar-v bg-shadow-light">
                        <span class="title">操作菜单</span>
                        <ul>
                            <li>
                                <a href="#" onclick="switchPanel('panel01')" href="">添加图书</a>
                                <a href="#" onclick="switchPanel('panel02')" href="">查看图书</a>
                            </li>
                        </ul>
                        <div class="margin-top10"></div>
                    </div>
                </div>
            </div>
            <div class="span9 font-gray">
                <div class="row margin-top30 padding-right40">
                    <div class="bg-shadow-light">
                        <div id="panel01">
                            <div class="row">
                                <div class="span12">
                                    <h1 class="font-large margin0" style="margin: 4px;">添加图书</h1>
                                </div>
                            </div>
                            <div class="row">
                                <div class="span12">
                                    <div class="form">
                                        <form action="add_do.jsp" method="post">
                                            <div class="row">
                                                <div class="key span2">
                                                    索引:
                                                </div>
                                                <div class="value span10">
                                                    <input type="text" name="book_index" value="">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="key span2">
                                                    书名:
                                                </div>
                                                <div class="value span10">
                                                    <input type="text" name="title" value="">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="key span2">
                                                    作者:
                                                </div>
                                                <div class="value span10">
                                                    <input type="text" name="author" value="">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="key span2">
                                                    出版社:
                                                </div>
                                                <div class="value span10">
                                                    <input type="text" name="publisher" value="">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="key span2">
                                                    出版时间:
                                                </div>
                                                <div class="value span10">
                                                    <input type="text" name="publish_time" value="">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="key span2">
                                                    分类:
                                                </div>
                                                <div class="value span10">
                                                    <select name="category">
                                                        <option value="0"> -- 请选择 -- </option>
                                                        <option value="1">test</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="key span2">
                                                    价格:
                                                </div>
                                                <div class="value span10">
                                                    <input type="text" name="price" value="">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="key span2">
                                                </div>
                                                <div class="value span10">
                                                    <input class="button" type="submit" name="" value="提交">
                                                    <input class="button" type="reset" name="" value="重置">
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--end of panel01-->
                        <div id="panel02" style="display: none;">
                            <div class="row">
                                <div class="span12">
                                    <h1 class="font-large margin0" style="margin: 4px;">查看图书</h1>
                                </div>
                            </div>
                            <div class="row">
                                <div class="span6">
                                    <div class="row padding10">
                                        书名: <input id="book_search" type="text" name="title" value="">
                                        <input class="button-small" onclick="ajaxDoc('book_search')" type="submit" name="submit" value="查询">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="span12">
                                    <table id="select_book_table" class="margin-left10">
                                        <thead>
                                            <tr>
                                                <td>ID</td>
                                                <td>书名</td>
                                                <td>作者</td>
                                                <td>出版社</td>
                                                <td>出版日期</td>
                                                <td>分类</td>
                                                <td>价格</td>
                                                <td>操作</td>
                                            </tr>
                                        </thead>
                                        <tbody id="select_book_list">
                                            <%
                                                String dbName = "test";
                                                String userName = "root";
                                                String password = "";
                                                DBManager dbm = new DBManager(dbName, userName, password);
                                                
                                                List<Map<String, Object>> bookList = dbm.getAllData("book");
                                            %>
                                            <%  for(Map<String, Object> mapItem : bookList){ %>
                                                    <tr class='book_<%=mapItem.get("id")%>'>
                                                        <td class="book_index"><%=mapItem.get("book_index")%></td>
                                                        <td class="title"><%=mapItem.get("title")%></td>
                                                        <td class="author"><%=mapItem.get("author")%></td>
                                                        <td class="publisher"><%=mapItem.get("publisher")%></td>
                                                        <td class="publish_time"><%=mapItem.get("publish_time")%></td>
                                                        <td class="category"><%=mapItem.get("category")%></td>
                                                        <td class="price"><%=mapItem.get("price")%></td>
                                                        <td>
                                                            <span onclick='editPanel(<%=mapItem.get("id")%>)'>
                                                                <button class="button-small" type="button">编辑</button>                                                                
                                                            </span>
                                                            <a href='delete_do.jsp?id=<%=mapItem.get("id")%>'>
                                                                <button class="button-small" type="button">删除</button>
                                                            </a>
                                                        </td>
                                                    </tr>
                                            <%  }  %>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <!--end of panel02-->
                        <div id="panel03" style="display: none;">
                            <div class="row">
                                <div class="span12">
                                    <h1 class="font-large margin0" style="margin: 4px;">编辑图书</h1>
                                </div>
                            </div>
                            <div class="row">
                                <div class="span12">
                                    <div class="form">
                                        <form action="update_do.jsp" method="post">
                                            <input id="hidden_id" type="hidden" name="id" value="">
                                            <div class="row">
                                                <div class="key span2">
                                                    索引:
                                                </div>
                                                <div class="value span10">
                                                    <input id="book_index" type="text" name="book_index" value="">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="key span2">
                                                    书名:
                                                </div>
                                                <div class="value span10">
                                                    <input id="title" type="text" name="title" value="">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="key span2">
                                                    作者:
                                                </div>
                                                <div class="value span10">
                                                    <input id="author" type="text" name="author" value="">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="key span2">
                                                    出版社:
                                                </div>
                                                <div class="value span10">
                                                    <input id="publisher" type="text" name="publisher" value="">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="key span2">
                                                    出版时间:
                                                </div>
                                                <div class="value span10">
                                                    <input id="publish_time" type="text" name="publish_time" value="">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="key span2">
                                                    分类:
                                                </div>
                                                <div class="value span10">
                                                    <select id="category" name="category">
                                                        <option value="0"> -- 请选择 -- </option>
                                                        <option value="1">test</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="key span2">
                                                    价格:
                                                </div>
                                                <div class="value span10">
                                                    <input id="price" type="text" name="price" value="">
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="key span2">
                                                </div>
                                                <div class="value span10">
                                                    <input class="button" type="submit" name="" value="更新">
                                                    <input class="button" type="reset" name="" value="重置">
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- end of panel03 -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>